<!--
  加工溯源信息详情
 -->

<template>
  <div class="contents">
    <el-card v-if="nowbastartus === 1" id="sowing" class="box-card">
      <div slot="header" class="clearfix">
        <span>加工原料信息 RAW MATERAIL INFORMATION FOR PROCESSING</span>
      </div>
      <div>
        <p class="batch-title">
          {{ "&gt;&gt;&gt; " + " 原料名称：鲈鱼 " + " &lt;&lt;&lt;" }}
        </p>
        <ul>
          <li>
            <span class="zh-lable">| 单位名称:</span>
            <el-input disabled align="center" :value="'湖州水产养殖有限公司'" />
          </li>
          <li>
            <span class="zh-lable">| 单位地址:</span>
            <el-input disabled align="center" :value="'湖州市南浔区'" />
          </li>
          <li>
            <span class="zh-lable">| 联系人:</span>
            <el-input disabled align="center" :value="'张永强'" />
          </li>
          <li>
            <span class="zh-lable">| 联系电话:</span>
            <el-input disabled align="center" :value="'15858951232'" />
          </li>
        </ul>
        <div :style="{ height: cloIntHeight }" class="production-batch">
          <span class="zh-lable">
            | 生产批次:
            <el-button v-if="ProductList.length > 9" type="text" @click="cloIntion">
              <span v-show="!cloInStatus">
                点击收起
                <i class="el-icon-caret-top"> </i>
              </span>
              <span v-show="cloInStatus">
                点击展开
                <i class="el-icon-caret-bottom"> </i>
              </span>
            </el-button>
          </span>
          <div
            ref="batchBox"
            :style="{ height: cloIntHeight }"
            class="batch-box"
          >
            <span
              v-for="(item, index) in ProductList"
              :key="index"
              class="batclick"
              :title="item.batchName"
            >
              <el-button @click="closeionStartus(item, index)">
                <span>{{ item.batchName }}</span>
                <h4>点击查看详情</h4>
              </el-button>
            </span>
          </div>
        </div>
      </div>
    </el-card>
    <!-- 生产批次信息 -->
    <transition name="el-zoom-in-top">
      <BatchList v-if="nowbastartus===2" :product-list="ProductList" :nowseiontindex="nowseiontindex" @ret="ret" />
    </transition>

    <!-- 加工信息 -->
    <transition name="el-zoom-in-top">
      <SubjectInformation v-if="nowbastartus === 1" :batch-base-message-list="batchBaseMessageList" />
    </transition>

    <!-- 仓储信息 -->
    <transition name="el-zoom-in-top">
      <StorageInformation v-if="nowbastartus === 1" />
    </transition>
    <!-- 产品信息 -->
    <!-- <div
      v-for="(item, index) in ProductList"
      :key="index"
      class="ProductInformation"
    >
      <ProductInformation>
        <template slot="close">
          <el-button
            v-if="nowpage[index] === 2"
            type="text"
            class="closeInformation"
            @click="closeInformation(index)"
          >
            <i class="el-icon-caret-top"></i>收起下列信息
          </el-button>
        </template>
        <template slot="open">
          <div
            v-if="nowpage[index] === 1"
            class="openInformation"
            @click="openInformation(index)"
          >
            <i class="el-icon-caret-bottom"></i>展开更多信息
          </div>
        </template>
      </ProductInformation>
      <ProductTraceability
        v-if="nowpage[index] === 2"
        ref="prouductmessage"
        :batch-from="batchFromNal"
        :imgurls="imgurls"
        :state="true"
      />
    </div> -->
    <!-- 生长数据 -->
    <!-- // -----------------------// -->
    <el-dialog
      class="dialog"
      title="查看农资图片"
      :visible.sync="agridialogAVisible"
    >
      <!-- <img :src="pictureId !== undefined ? basicUrl + agrisourcepictureId : ''" /> -->
    </el-dialog>
    <!-- 通用图片弹出框 -->
    <el-dialog :visible.sync="dialogFormVisible">
      <!-- <div style="width:100%;display:flex;justify-content: center;align-content: center;"> -->
      <img :src="selectedpicdata" />
      <!-- </div> -->
    </el-dialog>
  </div>
</template>
<script>
// import vueQr from "vue-qr";
import { getToken } from "@/utils/auth";
// import axios from "axios";
import BatchList from "./components/batch-list";
import SubjectInformation from "./components/subject-information.vue";
import StorageInformation from "./components/Storage-information.vue";
// import ProductTraceability from "../productionTraceabilitytwo/index";
// import ProductInformation from "./components/product-information.vue";
// import zhecharts from "@/components/Echarts/components/linechart/chart.vue";
// import zhrowblank from "@/components/zh-row-blank/zh-row-blank.vue";
export default {
  components: {
    SubjectInformation,
    StorageInformation,
    // ProductInformation,
    // ProductTraceability,
    BatchList
  },
  props: {
    batchFrom: {
      type: Object,
      default: () => ({})
    },
    batCode: {
      type: Number,
      default: 0
    },
    imgurls: {
      type: String,
      default: () => ""
    }
  },
  data() {
    return {
      // ---头部批次信息---
      // topimgurl: "https://img.js.design/assets/img/615fd67a91d8f56085f05f4a.png",
      topimgurl: "",
      // 批次基础信息
      batchBaseMessageList: {
        batchName: "", // 批次名称
        plantingTypeName: "", // 种养种类
        mode: "", //
        varietyName: "", // 产品品种
        batchNo: "", // 批次号
        contact: "", // 负责人
        organizationName: "", // 主体名称.
        address: "", // 主体地址
        trace: {
          brand: "", // 品牌名
          productNumber: "", // 产品编号
          productGrade: "", // 产品等级
          originPlace: "", // 产地
          plantPlace: "", // 种养地址
          tracePictureId: "" // 顶部图片id
        }
      },
      // imgUrls: '',
      trace: {
        brand: "", // 品牌名
        productNumber: "", // 产品编号
        productGrade: "", // 产品等级
        originPlace: "", // 产地
        plantPlace: "", // 种养地址
        tracePictureId: "" // 顶部图片id
      },
      ProductList: [
        {
          assetDate: "2021-06-01",
          batchNo: "0001G202112207",
          batchId: 3,
          batchName: "004田福林中区四号田水稻（浙粳100）",
          contact: "田福林",
          farmingTypeNo: 1,
          organizationNo: 25,
          organizationName: "旧馆高品质示范基地",
          pictureId: 60,
          plantAddress: "南浔区旧馆镇",
          plantVarietyId: 1,
          plantingTypeId: 1,
          plantingTypeName: "水稻",
          productionBaseInfoId: 4,
          traceSource: {
            batchNo: "0001G202112207",
            batchType: "PRODUCTION",
            organizationNo: 25,
            organizationInfoId: 4,
            traceSourceId: 6
          },
          traceSourceId: 6,
          varietyName: "浙粳100"
        }
      ],
      nowpage: [],
      nowbastartus: 1,
      qualityimageList: [
        // {
        //   url: require("@/assets/trace-source-manage/zizhiimg/zhijian1.jpg")
        // },
        // {
        //   url: require("@/assets/trace-source-manage/zizhiimg/zhijian2.jpg")
        // }
      ],
      // 二维码数据
      downloadData: {
        url:
          `${this.$webSerUrl}source/#/?batchNo=3&databaseName="DB_TDW1_CXXC"`,
        icon: require("@/assets/trace-source-manage/yezi.png")
        // icon: 'https://img.js.design/assets/img/615fd67a91d8f56085f05f4a.png'
      },
      // ---农资投入---
      // 表格相关
      loading: true,
      agridialogAVisible: false,
      agrisourcepictureId: "",
      // uchart图数据相关
      // 生长记录数据uchart
      // 表格 ---药肥统计
      batchFromNal: {},
      // 发生病害总次数列表
      // 检测报告
      currenttwo: 0,
      // 点击选择的图片-弹框展示
      selectedpicdata: "",
      // 批次id
      // 批次编码
      batchNo: undefined,
      // 数据库名称
      databaseName: "DB_TDW1_CXXC",
      // ---------
      dialogVisible: false,
      isActive: false,
      pictureId: "",
      dialogFormVisible: false,
      tableData: [],
      returnData: [],
      cloInStatus: true,
      cloIntHeight: "90px",
      cloIntboxName: "展开",
      nowseiontindex: 0
    };
  },
  mounted() {
    let batchFrom = this.batchFrom;
    setTimeout(() => {
      this.setbatchidmet(batchFrom);
    }, 200);
    // 暂时
    this.$nextTick(() => {
      this.ProductList.forEach((item, index) => {
        this.$set(this.nowpage, [index], 1);
        // this.nowpage[index] =  1
        // this.openClose[index] =  1
      });
    });
  },
  methods: {
    closeionStartus(val, index) {
      this.nowbastartus = 2
      this.nowseiontindex = index
      // console.log(val)
    },
    ret(e) {
      this.nowbastartus = e
    },
    // 展开关闭
    cloIntion() {
      // 获取当前高度
      let cloIntHeight = this.$refs.batchBox.clientHeight;
      // 根据当前状态切换
      if (this.cloInStatus) {
        this.cloInStatus = false;
      } else {
        this.cloInStatus = true;
      }
      // 根据当前状态和高度， 切换高度
      if (cloIntHeight <= 90 && !this.cloInStatus) {
        this.cloIntHeight = "330px";
        this.cloIntboxName = "点击展开";
      } else {
        this.cloIntHeight = "90px";
        this.checkboxName = "点击收起";
      }
    },
    // 设置batchid
    setbatchidmet(val) {
      this.batchNo = val.batchNo;
      // console.log(this.batchNo,this.batchNo)
      this.databaseName = getToken("databaseName");
      // let zhurl = `${this.$webSerUrl}traceSo/#/?batchNo=${this.batchNo}&databaseName=${this.databaseName}`
      this.downloadData = {
        url: `${this.$webSerUrl}mateFarmTraceSource/#/pages/production-trace/production-traceone?batchNo=${this.batchNo}&databaseName=${this.databaseName}&batchType=PRODUCTION`,
        icon: require("@/assets/trace-source-manage/yezi.png")
      };
    },
    closeInformation(index) {
      this.$set(this.nowpage, [index], 1);
    },
    openInformation(index) {
      this.batchFromNal = this.batchFrom;
      this.$set(this.nowpage, [index], 2);
    },
    search() {}
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

.button {
  position: absolute;
  top: 5px;
  right: 10px;
  background-color: rgba($color: #000000, $alpha: 0);
  color: #fffff0;
  border: none;
}
.batch-title {
  margin-top: 20px;
  color: #fff;
  font-size: 20px;
}
.batclick {
  // padding-bottom: 10px;
  display: inline-block;
  margin-bottom: 10px;
  width: 20%;
  text-align: center;
  .el-button {
    width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 15px;
    height: 33px;
    line-height: 12px;
    background-color: #007795;
    color: #fffff0;
    border-color: #007795;
    span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 15px;
      width: 100%;
      display: block;
    }
    h4 {
      display: none;
      margin: 0;
      padding: 0;
    }
  }
  .el-button:hover {
    color: #01fde0;
    border-color: #01fde0;
    span {
      display: none;
    }
    h4 {
      display: block;
    }
  }
}
.zh-lable {
  width: 70px;
  white-space: nowrap;
}
.ProductInformation {
  width: 100%;
}
.openInformation {
  width: 100%;
  text-align: center;
  height: 60px;
  line-height: 58px;
  background: rgba(5, 122, 158, 1);
  border: 1px solid rgba(15, 70, 86, 1);
}
.step {
  height: 100px;
  width: 100%;
  display: flex;
  align-items: center;
  .el-col {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    .stepBtn {
      background-color: rgba($color: #000000, $alpha: 0);
      // color:#fff;
      // ::v-deep i {
      //   color: #FFF;
      // }
    }
    .right {
      position: absolute;
      right: -36%;
      /* transform: translate(-40%, -50%); */
      top: 34%;
      width: 73%;
      height: 2px;
      background-color: #fffff085;
      i {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #fffff0;
      }
    }
  }
}
.el-card {
  width: 100%;
  background-color: #225768;
  color: #fff;
  margin-bottom: 40px;
  border: 1px solid rgba($color: #fff, $alpha: 0.3);
  ::v-deep .el-card__header {
    color: #64b9d1;
    border-bottom: 1px solid rgba($color: #64b9d1, $alpha: 0.9);
  }
}
::v-deep .Timeline-box {
  height: calc(100% - 160px) !important;
}
#sowing {
  min-height: 150px;
  width: 100%;
  ::v-deep .el-card__body {
    min-height: 100px;
  }
  > div {
    height: 100%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-evenly;

    ul {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      padding: 0;
      li {
        display: flex;
        list-style-type: none;
        margin: 0;
        width: 25%;
        line-height: 40px;
        .el-input {
          margin-left: 10px;
          width: 70%;
          ::v-deep .el-input__inner {
            border: 0;
            height: 30px;
            background-color: rgba($color: #0e4352, $alpha: 1);
            border-radius: 40px;
            text-align: center;
          }
        }
      }
    }
    .production-batch {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      height: 90px;
      transition: 1s;
      .zh-lable {
        width: 5%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
      }
      .batch-box {
        transition: 1s;
        overflow-x: hidden;
        width: 93%;
        padding: 10px;
        background-color: #0e4352;
      }
    }
  }
}

.imgl {
  margin: 0 40px;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-evenly;
  .imgdet {
    border-radius: 0;
    .shadows {
      margin: 2px !important;
      box-sizing: content-box;
      position: relative;
      .shadowx {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 20, 26, 0.71);
      }
      .shadowBut {
        display: none;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
      }
    }
    .shadows:hover {
      border: 1px solid rgba(255, 255, 255, 0.54);
      .shadowBut {
        display: block;
      }
      .shadowx {
        display: block;
      }
    }
    img {
      border: none !important;
      border-radius: 0 !important;
      width: 280px !important;
      height: 200px !important;
    }
    .text {
      text-align: center;
    }
  }
}
// // 解决行无法铺满整个表格
// ::v-deep .el-table__body{
//   height:auto !important;
// }
// 弹出框图片
::v-deep .el-dialog {
  .el-dialog__headerbtn {
    position: absolute;
    top: 5px;
    right: 10px;
  }
  .el-dialog__body {
    padding: 5px 5px;
  }
  img {
    width: 100%;
  }
}
::v-deep .zhcontent {
  .content {
    height: calc(100% - 15px) !important;
  }
}
</style>
